<template>
  <div class="authorRot">
    <!-- 作者背景 -->
    <div class="authorHeader" v-if="authorDataList.author!= null">
      <img class="authbag" :src="authorDataList.author.cover" alt>
      <header>
        <span style="font-weight:blod" class="fa fa-angle-left" @click="authFan"></span>
        <span v-text="authorDataList.author.name"></span>
        <span>收录</span>
      </header>
      <img class="authorPto" :src="authorDataList.author.cover" alt>
      <p class="pName" v-text="authorDataList.author.name"></p>
      <p class="pDes" v-text="authorDataList.author.description"></p>
    </div>
    <!-- 滑动块 -->
    <div class="authNav">
      <tab class="ctop" active-color="#fc378c" v-model="index">
        <tab-item
          class="vux-center"
          :selected="demo2 === item"
          v-for="(item, index) in list"
          @click="demo2 "
          :key="index"
        >{{item}}</tab-item>
      </tab>
      <swiper v-model="index" height="1000vw" :show-dots="false">
        <swiper-item class="cNav" v-for="(item, index) in list" :key="index">
          <!-- 最新 -->
          <div
            v-if="index==0"
            class="tab-swiper vux-center"
            v-for="(newda,n) in newDatalist"
            :key="n"
          >
            <div class="newDivOne">
              <p v-text="newda.content"></p>
              <img class="newdaImg" v-if="newda.image != null" :src="newda.image.url" alt>
            </div>
            <div v-if="newda.user != null" class="newUse">
              <img :src="newda.user.avatar" alt>
              <p v-text="newda.user.nickname"></p>
            </div>
          </div>
          <!-- 最热 -->
          <div
            v-if="index==1"
            class="tab-swiper vux-center"
            v-for="(hotda,h) in authHotDataList"
            :key="h"
          >
            <div class="newDivOne">
              <p v-if="hotda.content != ''" v-text="hotda.content"></p>
              <img class="newdaImg" v-if="hotda.image != null" :src="hotda.image.url" alt>
            </div>
            <div v-if="hotda.user != null" class="newUse">
              <img :src="hotda.user.avatar" alt>
              <p v-text="hotda.user.nickname"></p>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  Sticky,
  Divider,
  XButton,
  Swiper,
  SwiperItem
} from "vux";
const list = () => ["最新", "最热"];
export default {
  data() {
    return {
      authorDataList: [],
      authHotDataList: [],
      list: list(),
      demo2: "",
      index: 0,
      newDatalist: []
    };
  },
  props: ["authorid"],
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  },
  mounted() {
    this.getAuthMessage();
    this.getnewAuList();
    // this.didScroll();
  },
  methods: {
    getAuthMessage: function() {
      var _this = this;
      // 最热
      this.$http
        .get(
          "judou/api/v6/op/authors/" +
            this.authorid +
            "/sentences?page=1&per_page=20&order_by=hot&token=e16afc7de3b96260de24eb41b22f9879&timestamp=1545440819&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=85bdfc50c938b04f77760260a0d4b3b7"
        )
        .then(function(value) {
          _this.authorDataList = value.body.data[0];
          _this.authHotDataList = value.body.data;
          console.log(_this.authorDataList);
        });
    },
    authFan: function() {
      window.history.back(-1);
      $(".weui-tabbar").show();
    },
    // 最新
    getnewAuList: function() {
      var _this = this;
      this.$http
        .get(
          "judou/api/v6/op/authors/" +
            this.authorid +
            "/sentences?page=1&per_page=20&order_by=latest&token=e16afc7de3b96260de24eb41b22f9879&timestamp=1545441138&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=4a6214a2eaea42c5fded21d68b942e82"
        )
        .then(function(value) {
          _this.newDatalist = value.body.data;
          // console.log(_this.newDatalist)
        });
    },
    // 收录头部变色
    // didScroll: function() {
    //   console.log(123123123);
    //   // 获取当前页面的滚动距离
    //   var desTop = $('.pDes').height()
    //   console.log(desTop)
    // }
  }
};
</script>
<style scoped>
.vux-tab-wrap {
  position: sticky;
  top: 10vw;
}
.authorRot {
  width: 100vw;
  height: 100vw;
  z-index: 10000;
}
.authorHeader {
  /* border: 1px solid black; */
  position: relative;
  height: 80vw;
  border-bottom: 3vw solid rgb(223, 218, 218);
}
.authorRot header {
  width: 100vw;
  height: 10vw;
  display: flex;
  justify-content: space-between;
  font-size: 5vw;
  position: fixed;
  top: 0;
}
.authorRot header span {
  margin: 3vw;
}
.authbag {
  width: 97%;
  height: 30vw;
  filter: blur(9px);
  position: fixed;
}
.authorPto {
  width: 25vw;
  height: 25vw;
  position: absolute;
  top: 13vw;
  left: 38%;
}
.pName {
  position: absolute;
  text-align: center;
  font-weight: bold;
  font-size: 4vw;
  top: 40vw;
  left: 40%;
}
.pDes {
  position: absolute;
  width: 80%;
  font-size: 3.5vw;
  color: rgb(163, 149, 149);
  top: 50vw;
  left: 10%;
}
.newDivOne {
  padding: 3%;
}
.ctop {
  width: 100vw;
  z-index: 1000;
}
header {
  z-index: 1000;
  background-color: #fdfdfd;
  
}
.newdaImg {
  width: 90vw;
  height: 40vw;
  border-radius: 3vw;
}
.tab-swiper {
  width: 100vw;
  /* height: 70vw; */
  border-top: 2vw solid rgb(236, 232, 232);
  z-index: 800;
}
.newUse {
  display: flex;
  padding: 3%;
}
.newUse img {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
}
.newUse p {
  margin: 3%;
}
</style>
